<template>
    <view class="content">
        <view class="bg"></view>
        
        <view class="box">
            <view class="item">
                <view class="grey">
                    标题<text style="color: #f66969;">*</text>
                </view>
                <view class="i-right">
                    <input type="text" v-model="title" placeholder="请输入" class="inp">
                </view>
            </view>
            <view class="item">
                <view class="grey">
                    信息类型<text style="color: #f66969;">*</text>
                </view>
                <view class="i-right" @click="show_1 = true">
                    <input type="text" v-model="type" placeholder="请选择" class="inp" disabled>
                    <u-icon name="arrow-down-fill" color="#363f4d" size="22" class="u-m-l-10"></u-icon>
                </view>
            </view>
            <view class="item">
                <view class="grey">
                    牛只类型<text style="color: #f66969;">*</text>
                </view>
                <view class="i-right" @click="show_2 = true">
                    <input type="text" v-model="calf" placeholder="请选择" class="inp" disabled>
                    <u-icon name="arrow-down-fill" color="#363f4d" size="22" class="u-m-l-10"></u-icon>
                </view>
            </view>
            <view class="item-col">
                <view class="grey">
                    详细描述<text style="color: #f66969;">*</text>
                </view>
                <view class="i-right-col">
                    <textarea v-model="content" maxlength="150" placeholder="请输入描述信息" class="t-inp"></textarea>
                    <view class="num">{{ content.length }}/150</view>
                </view>
            </view>
            <view class="item-col">
                <view class="grey">
                    添加图片（{{pics_url.length}}/6）
                </view>
                <view class="img-box">
                    <template v-if="pics_url.length > 0">
                        <view class="u-rela" v-for="(el, ind) in pics_url" :key="ind">
                            <image :src="el" class="up" @click.stop="$previewImage(pics_url, ind)"></image>
                            <view class="del" @click.stop="$delImage(pics_url, pics, ind)">删除</view>
                        </view>
                    </template>
                    <image src="../../static/image/g_up.png" class="up" v-if="pics_url.length < 6" @click="chooseImage"></image>
                </view>
            </view>
            <view class="item">
                <view class="grey">
                    地区<text style="color: #f66969;">*</text>
                </view>
                <view class="i-right" @click="regionShow = true">
                    <input type="text" v-model="region" placeholder="请选择" class="inp" disabled>
                    <u-icon name="arrow-down-fill" color="#363f4d" size="22" class="u-m-l-10"></u-icon>
                </view>
            </view>
            <view class="item">
                <view class="grey">
                    详细地址<text style="color: #f66969;">*</text>
                </view>
                <view class="i-right">
                    <input type="text" v-model="address" placeholder="请输入" class="inp">
                </view>
            </view>
        </view>
        
        <view class="box">
            <view class="item">
                <view class="grey">
                    联系人<text style="color: #f66969;">*</text>
                </view>
                <view class="i-right">
                    <input type="text" v-model="name" placeholder="请输入" class="inp">
                </view>
            </view>
            <view class="item">
                <view class="grey">
                    联系电话<text style="color: #f66969;">*</text>
                </view>
                <view class="i-right">
                    <input type="number" v-model="tel" placeholder="请输入" class="inp">
                </view>
            </view>
        </view>
        
        <view class="btn" @click="doSubmit">确认发布</view>
        
        <!-- 信息类型 -->
        <u-select v-model="show_1" mode="single-column" :list="typeList" value-name="value" label-name="name" @confirm="confirmType"></u-select>
        <!-- 牛只类型 -->
        <u-select v-model="show_2" mode="single-column" :list="calfList" value-name="value" label-name="name" @confirm="confirmCalf"></u-select>
        <!-- 省市区 -->
        <u-select v-model="regionShow" mode="mutil-column-auto" :list="regionList" value-name="region_id" label-name="name" child-name="sub" 
            @confirm="confirm"></u-select>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: '',
                show_1: false,
                typeList: [],
                type: '',
                typeId: '',
                show_2: false,
                calfList: [],
                calf: '',
                content: '',
                pics_url: [],
                pics: [],
                regionShow: false,
                regionList: [],
                region: '',
                province: '',
                city: '',
                district: '',
                address: '',
                name: '',
                tel: '',
                id: '',
            };
        },
        onLoad(option) {
            if (option.id) {
                this.id = option.id
                this.getData()
            }
            this.getRegion()
            this.getOption()
        },
        methods: {
            getData(){
            	this.$ajax('LnformationInfo', {
            		userToken: this.$getSync('userToken'),
                    id: this.id,
                    category: 1,//1-牛源信息 2-人力场地信息
            	}).then(ret => {
            		if (ret.status == 0) {
            			let data = ret.data.info
                        this.title = data.title
                        this.type = data.type_txt
                        this.typeId = data.type
                        this.calf = data.gender
                        this.content = data.describe
                        
                        if (data.image_uri_txt.length > 0) {
                            data.image_uri_txt.forEach(cur => {
                                this.pics_url.push(cur.attach_uri)
                                this.pics.push(cur.id)
                            })
                        }
                        this.region = data.province_txt + data.city_txt + data.district_txt
                        this.province = data.province
                        this.city = data.city
                        this.district = data.district
                        this.address = data.address
                        this.name = data.contacts
                        this.tel = data.telephone
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
            
            doSubmit() {
                if (!this.title) {
                    this.$toast('请输入标题')
                    return
                }
                if (!this.typeId) {
                    this.$toast('请选择信息类型')
                    return
                }
                if (!this.calf) {
                    this.$toast('请选择牛只类型')
                    return
                }
                if (!this.content) {
                    this.$toast('请输入详细描述')
                    return
                }
                if (!this.province) {
                    this.$toast('请选择地区')
                    return
                }
                if (!this.address) {
                    this.$toast('请输入详细地址')
                    return
                }
                if (!this.name) {
                    this.$toast('请输入联系人')
                    return
                }
                if (!this.tel) {
                    this.$toast('请输入联系电话')
                    return
                }
                if(!this.$checkPhone(this.tel)){
                	this.$toast('请输入正确的手机号')
                	return
                }
                this.$ajax('addLnformation', {
                	userToken: this.$getSync('userToken'),
                    id: this.id,//修改时传
                    category: 1,//1-牛源信息 2-人力-场地信息
                    type: this.typeId,//信息类型 1-招聘 2-求职 3-出租/出售 4-求租/求购 5-其他
                    gender: this.calf,//性别 公牛/母牛 男/女
                    contacts: this.name,//联系人
                    telephone: this.tel,//联系电话
                    describe: this.content,//描述
                    province: this.province,
                    city: this.city,
                    district: this.district,
                    address: this.address,
                    company: '',//公司
                    title: this.title,//姓名（招聘岗位）
                    working_hour: '',//工作时长
                    salary: '',//薪资待遇
                    image_id: this.pics.join(',') || '',//图片 多个用逗号分隔
                }).then(ret => {
                	if (ret.status == 0) {
                		this.$toast('提交成功')
                        setTimeout(() => {
                            this.$backT()
                        },500)
                	} else {
                		this.$toast(ret.message);
                	}
                });
            },
            
            confirmCalf(e) {
                this.calf = e[0].label
            },
            
            confirmType(e) {
                this.type = e[0].label
                this.typeId = e[0].value
            },
            
            // 选择省市区
            confirm(e) {
                console.log(e);
                this.region = e[0].label + e[1].label + e[2].label
                this.province = e[0].value
                this.city = e[1].value
                this.district = e[2].value
            },
            
            // 获取省市区
            getRegion(){
            	this.$ajax('region', {
            		
            	}).then(ret => {
            		if (ret.status == 0) {
            			this.regionList = ret.data
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
            
            // 获取筛选项
            getOption(){
            	this.$ajax('searchLnformationOption', {
            		userToken: this.$getSync('userToken'),
            	}).then(ret => {
            		if (ret.status == 0) {
                        if (ret.data && ret.data[0] && ret.data[0].list) {
                            this.typeList = ret.data[0].list//信息类型
                            this.typeList.forEach(cur => {
                                this.$set(cur, 'isSelect', false)
                            })
                        }
                        
                        if (ret.data && ret.data[1] && ret.data[1].list) {
                            this.calfList = ret.data[1].list//牛只类型
                            this.calfList.forEach(cur => {
                                this.$set(cur, 'isSelect', false)
                            })
                        }
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
            
            chooseImage() {
                uni.chooseImage({
                    count: 6, //默认9
                    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album', 'camera'], // 相机拍照 album 相册、camera 拍照
                    success: (res) => {
                        const tempFilePaths = res.tempFilePaths;
                        for (let i = 0; i < tempFilePaths.length; i++) {
                            this.$upLoadPic(res.tempFilePaths[i]).then(ret => {
                                console.log(ret)
                                this.pics.push(ret.data.id)
                                this.pics_url.push(ret.data.attach_uri)
                            });
                        }
                    }
                });
            },
        }
    };
</script>

<style lang="scss">
    
    page{
        background-color: #f5f5f5;
    }
    .content {
    	padding: 20rpx;
    }
    
    .bg {
    	width: 100%;
    	height: 390rpx;
    	position: absolute;
    	top: 0;
    	left: 0;
    	z-index: -1;
    	background: linear-gradient(to bottom, #cfe4fc, #f5f5f5);
    }
    .box{
        padding: 0 35rpx;
        background-color: #fff;
        border-radius: 20rpx;
        margin-bottom: 20rpx;
    }
    .item{
        padding: 30rpx 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .grey{
        color: #656565;
    }
    .i-right{
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .inp{
        flex: 1;
        text-align: right;
    }
    
    .item-col{
        padding: 30rpx 0;
    }
    .i-right-col{
        background-color: #f5f6fa;
        border-radius: 10rpx;
        padding: 15rpx 20rpx;
        margin-top: 25rpx;
    }
    .t-inp{
        width: 100%;
        height: 260rpx;
    }
    .num{
        font-size: 22rpx;
        color: #adadad;
        text-align: right;
        padding-top: 15rpx;
    }
    
    .img-box{
        margin-top: 5rpx;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
    }
    .up{
        width: 150rpx;
        height: 150rpx;
        margin-top: 20rpx;
        margin-right: 20rpx;
    }
    .del{
        font-size: 22rpx;
        color: #fff;
        padding: 4rpx 10rpx;
        background: rgba(0, 0, 0, .5);
        position: absolute;
        right: 20rpx;
        bottom: 0;
        z-index: 1;
    }
    
    .btn{
        font-size: 34rpx;
        color: #fff;
        text-align: center;
        padding: 25rpx;
        background-color: #00734c;
        border-radius: 50rpx;
        margin-top: 40rpx;
    }

</style>
